<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片瀑布流</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/flexible.js"></script>

</head>
<body>
<h1 class="title-h1">手机模板——图片瀑布流</h1>
<div class="img-hidden">
    <div id = "imgScroll">
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg01.jpg">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg.png">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg02.jpg">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg03.jpg">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg01.jpg">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg.png">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg02.jpg">
            </div>
        </div>
        <div class = "imgScrollBox">
            <div class = "pic">
                <img src = "../image/timg03.jpg">
            </div>
        </div>
    </div>
</div>
<script>
    $(".img-hidden").css("height",$("body").height()-$(".title-h1").height());
    window.onload = function(){
        waterFull('imgScroll','imgScrollBox');
    }

    function waterFull(parent,children){
        var oParent = document.getElementById(parent);
        //var oBoxs = parent.querySelectorAll(".box");

        var oBoxs = getByClass(oParent,children);
//        console.log(oBoxs)
        //计算整个页面显示的列数

        var oBoxW = oBoxs[0].offsetWidth;
        console.log(oBoxW);
        var cols = Math.floor($(".img-hidden").width()/oBoxW);

        //设置main的宽度，并且居中

        oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';

        //找出高度最小的图片，将下一个图片放在下面

        //定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度

        var arrH = [];

        for(var i = 0; i< oBoxs.length ; i++){
            if(i < cols){
                arrH.push(oBoxs[i].offsetHeight);
            }
            else{
                var minH = Math.min.apply(null,arrH);

                var minIndex = getMinhIndex(arrH,minH);

                oBoxs[i].style.position = 'absolute';
                oBoxs[i].style.top= minH + 'px';
                oBoxs[i].style.left = minIndex * oBoxW + 'px';
                //  oBoxs[i].style.left = arrH[minIndex].;

                arrH[minIndex] += oBoxs[i].offsetHeight;
            }
        }


    }
    function getByClass(parent,className){

        var boxArr = new Array();//用来获取所有class为box的元素

        oElement = parent.getElementsByTagName('*');

        for (var i = 0; i <oElement.length; i++) {

            if(oElement[i].className == className){

                boxArr.push(oElement[i]);

            }
        };
        return boxArr;
    }


    //获取当前最小值得下标
    function getMinhIndex(array,min){

        for(var i in array){

            if(array[i] == min)

                return i;
        }
    }
</script>
</body>
</html>